<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>通过新窗口打开 OIDC 应用的例子</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    
    <button onclick="login()">登录</button>

    <script>

        function getQueryVariable(variable){
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    if(pair[0] == variable){return pair[1];}
            }
            return(false);
        }

        function login() {
            const loginWindow = window.open('https://lzoauth-test.authing.cn', '登录', 'height=600, width=400, top=50%, left=50%, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no"')
            let timer = setInterval(function() {
                // 检查登录窗口是否已经关闭
                if (loginWindow.closed) {
                    clearInterval(timer);
                    alert('页面关闭')
                }
            }, 100);
        }

        const code = getQueryVariable('code');
        if (code) {
            // 假设有 code 这个参数的网址是业务域名
            if (window.opener) {
                window.opener.postMessage({
                    code: code
                },'*')
                window.close();
            }
        } else {
            window.addEventListener('message', (e) => {
                alert('接收到消息，请打开控制台查看')
                const code = e.data
                console.log(code);
            }, false)
        }

    </script>
</body>
</html>